<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="flexbetween dingwei">
				<view class="flexcenter " :class="tab_type==item.value?'baisebj':'huangsebj'" v-for="item in toplist"
					:key="item.value" @click="tab_type=item.value"
					style="width: 50%;padding: 15rpx;box-sizing: border-box;">{{item.name}}</view>
			</view>
		</u-sticky>
		<view class="leftclass_box">
			<!--左边侧边栏 -->
			<view class="leftclass word_baiba hei">
				<scroll-view scroll-y="true" class="scroll-Yleft">
					<view :class="index==current?'itemlistfocus':'itemlist'" v-for="(item,index) in 5"
						@click="changecurrent(index,item)" :key="item">
						<view :class="index==current?'line line_orange':''"></view>
						<view :class="index==current?'itenlisttextfocus0':'itenlisttext'">工作站</view>
		
					</view>
				</scroll-view>
			</view>
			<!-- 右边内容 -->
			<view class="rightcontent ffffff">
				<scroll-view scroll-y="true" class="scroll-Yright ">
					<view class="" v-for="it in 10">
						<view class="mainpadding2s" style="background-color: #96d3e5;">
							工作站1
						</view>
						<view class="mainpadding2s" style="padding-top: 0;">
							<view class="ffffff margin_top1" v-for="item in 5" @click="jumpurl('/pages/workbench/zhuandangxq')" style="border: 1rpx solid #999; border-radius: 10rpx;padding: 10rpx;">
								<view class=" color_san text_a lianghang">商品名稱商品名稱商品名稱商品名稱商品名稱</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_type:1,
				toplist:[{
					name: '未轉檔',
					value: 1,
				}, {
					name: '已轉檔',
					value: 2,
				}],
				current: 0,
			}
		},
		
		methods: {
			changecurrent(index, item) {
				this.current = index
				this.category_id = item.id
				this.getGoodsList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orange {
		color: #D48B39;
	}

	.three_color {
		font-size: 28rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		margin-top: 25rpx;
	}

	.img {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.matter {
		padding: 0rpx 24rpx;
	}

	.scroll-Yleft {
		height: calc(100vh - 30rpx);
		width: 185rpx;
	}

	.scroll-Yright {
		height: calc(100vh - 30rpx);
		width: calc(100vw - 190rpx);
		// padding: 8rpx 24rpx 30rpx 24rpx;
		box-sizing: border-box;

	}

	.zwtimg {
		padding-top: 400rpx;

		image {
			width: 350rpx;
			height: 350rpx;
		}
	}

	.huisetext {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.yuanshilt {
		margin: auto;
		width: 118rpx;
		height: 118rpx;
		border-radius: 50%;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.sanshi {
		width: 33.33%;
	}

	// 侧边栏
	.secondaryclass {
		width: 100%;
		margin-top: 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.rightcontent {
		width: 100%;
		height: calc(100vh - 30rpx);
		padding: 0rpx 30rpx 0 190rpx;
		box-sizing: border-box;
	}

	// 未选中背景色
	.itemlist {
		padding: 20rpx 16rpx;
		display: flex;
		align-items: center;
		background: #F9F9F8;
	}

	// 选中背景色
	.itemlistfocus {
		padding: 20rpx 16rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}

	.line {
		width: 10rpx;
		border-radius: 10rpx;
		height: 60rpx;

	}

	.line_orange {
		background-color: #F78D2B;
	}

	.line_blue {
		background-color: rgba(20, 132, 198, 1);
	}

	.line_green {
		background-color: rgba(27, 179, 147, 1);
	}

	.line_shen {
		background-color: RGBA(27, 81, 120, 1);
	}

	// 未选中
	.itenlisttext {
		margin-left: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		width: 120rpx;
	}

	// 选中
	.itenlisttextfocus0 {
		margin-left: 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #F78D2B;
		width: 120rpx;
	}


	.leftclass {
		position: fixed;
		left: 0;
		height: calc(100vh - 30rpx);
		background: #F9F9F8;
	}

	.leftclass_box {
		//min-height: calc(100vh - 100rpx - 214rpx);
		display: flex;
	}
</style>
